<template>
	<!-- 自定义风格图片预览组件 -->
	<view class="m-viveimg">
		<u-popup mode="center" :show="show" @close="close">
			<view style="overflow-y: auto;max-height: 100%;" @tap.stop>
				<u--image :src="imgSrc" mode="widthFix" height="auto"></u--image>
			</view>
			<view class="close" @click="close">
				<u-icon name="close-circle-fill" color="#fffff" size="35"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"m-viveimg",
		props: ['show','imgSrc'],
		data() {
			return {
			};
		},
		methods:{
			close(){
				this.$emit("close");
			}
		}
	}
</script>

<style lang="scss">
/* 	.m-viveimg{
		position: relative;
		z-index: 99999;
	} */
	u-overlay{
		z-index: 999;
		display: none;
	}
// 	.showimg{
// 		position: relative;
// 		top: 10%;
// 		height: 80%;
// /* 		top:calc(50%-10px); */
// 		width: 100%;
// 		display: flex;
// 		justify-content: center;
// 		align-items: center;
// 		flex-wrap: nowrap;
// 		z-index: 999;
// 	}
	.close{
		position: absolute;
		z-index: 3;
		bottom: -50px;
	}
	.u-icon{
		opacity: .5;
	}
	/deep/ .u-popup{
		&__content{
			background-color: transparent;
			position: relative;
			display: flex;
			align-items: center;
		}
	}
	/deep/ uni-image>div, uni-image>img{
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
		-ms-interpolation-mode: nearest-neighbor;
	}
</style>
